<template>
  <div>
    <div class="herdertop">
      <img src="../../assets/top.png" alt="" class="topImg" />
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>服务商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="center">
      <el-card>
        <el-row :gutter="20">
          <el-col :span="6">
            商品状态
            <el-select
              size="small"
              v-model="from.isPutAway"
              clearable
              placeholder="请选择"
            >
              <el-option label="上架" value="1"></el-option>
              <el-option label="下架" value="0"></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            选择工艺
            <el-select
              size="small"
              v-model="from.craftCode"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="(craft, index) in craftList"
                :key="index"
                :label="craft.craftName"
                :value="craft.craftCode"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            选择区域
            <el-select
              size="small"
              v-model="from.areaCode"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="(area, index) in subServiceAreaList"
                :key="index"
                :label="area.areaName"
                :value="area.areaCode"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            商品分类
            <el-select
              size="small"
              v-model="from.subClassifyCode"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="(classify, index) in classifyTree"
                :key="index"
                :label="classify.classifyName"
                :value="classify.classifyCode"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row style="margin-top: 15px" :gutter="20">
          <el-col :span="8">
            商品类型
            <el-select
              size="small"
              v-model="from.goodsType"
              clearable
              placeholder="请选择"
            >
              <el-option label="单项商品" :value="0" />
              <el-option label="保洁体验卡" :value="1" />
              <el-option label="家务师体验卡" :value="2" />
              <el-option label="保洁周期卡" :value="3" />
              <el-option label="家务师周期卡" :value="4" />
            </el-select>
          </el-col>
          <el-col :span="10">
            <el-input
              size="small"
              placeholder="请输入商品名称"
              v-model="from.goodsTitle"
              class="input-with"
              style="width: 360px"
            >
              <el-select
                value="商品名称"
                slot="prepend"
                placeholder="请选择"
                style="width: 100px"
              >
                <el-option label="商品名称" value=""></el-option>
              </el-select>
              <!-- <el-button slot="append" icon="el-icon-search" @click="search()"></el-button> -->
            </el-input>
          </el-col>
          <el-col :span="6">
            <el-button
              style="background-color:#fd804c;color: #fff;"
              @click.native.prevent="search()"
              >查询</el-button
            >
            <el-button type="warning" @click.native.prevent="isEmpty"
              >清空</el-button
            >
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div style="margin-top: 20px;">
              <el-button @click="batchEditIsPutAway(true)">批量上架</el-button>
              <el-button @click="batchEditIsPutAway(false)">批量下架</el-button>
              <el-button @click="addGoods()">新增商品</el-button>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <el-card style="margin-top: 15px;">
        <el-table
          ref="multipleTable"
          :data="tableData"
          @selection-change="handleSelectionChange"
          style="width: 100%"
        >
          <el-table-column v-if="false" prop="goodsCode" label="商品编码">
          </el-table-column>
          <el-table-column type="selection" width="45"> </el-table-column>
          <el-table-column prop="attachUrl" label="商品图片">
            <template slot-scope="scope">
              <el-image
                style="width: 60px; height: 60px"
                :src="scope.row.attachUrl"
                :preview-src-list="[scope.row.attachUrl]"
                :fit="'contain'"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="goodsTitle" label="商品信息">
          </el-table-column>
          <el-table-column prop="craftName" label="工艺类型"> </el-table-column>
          <el-table-column prop="unitName" label="单位"> </el-table-column>
          <el-table-column prop="goodsType" label="商品类型">
            <template slot-scope="scope">
              <span v-if="scope.row.goodsType === 0">单项商品</span>
              <span v-if="scope.row.goodsType === 1">保洁体验卡</span>
              <span v-if="scope.row.goodsType === 2">家务师体验卡</span>
              <span v-if="scope.row.goodsType === 3">保洁周期卡</span>
              <span v-if="scope.row.goodsType === 4">家务师周期卡</span>
            </template>
          </el-table-column>
          <el-table-column prop="classifyName" label="商品分类">
          </el-table-column>
          <el-table-column prop="areaNames" label="归属区域"> </el-table-column>
          <el-table-column prop="isPutAway" label="商品状态">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.isPutAway"
                @change="editIsPutAway($event, scope.row.goodsCode)"
                active-color="#fb8053"
                inactive-color="#dcdfe6"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="updater" label="操作人"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                @click="editGoods(scope.row.goodsCode)"
                style="color: #fc9e76;"
                type="text"
                size="small"
              >
                编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <div class="pagination_block">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[20, 40, 60, 80, 100]"
          :page-size="size"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  inject: ["reload"],
  data() {
    return {
      multipleSelection: [],
      tableData: [],
      classifyTree: [],
      subServiceAreaList: [],
      craftList: [],
      from: {
        goodsType: "",
        isPutAway: "",
        areaCode: "",
        subClassifyCode: "",
        craftCode: "",
        goodsTitle: ""
      },
      total: 0,
      currentPage: 1,
      size: 10
    };
  },
  methods: {
    handleSizeChange(val) {
      this.getTableData(this.currentPage, val);
    },
    handleCurrentChange(val) {
      this.getTableData(val, this.size);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    batchEditIsPutAway(isPutAway) {
      if (this.multipleSelection.length == 0) {
        this.$message.warning(`请勾选需要${isPutAway ? "上" : "下"}架的商品`);
        return;
      }
      this.$confirm(`是否批量${isPutAway ? "上" : "下"}架勾选的商品`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let goodsCodes = [];
        this.multipleSelection.forEach(item => {
          goodsCodes.push(item.goodsCode);
        });
        console.log(goodsCodes);
        this.$http
          .post("hssgoodsadmin/serviceGoodsInfo/batchPutAwayGoods", {
            isPutAway: isPutAway ? 1 : 0,
            goodsCodes
          })
          .then(() => {
            this.$message({
              type: "success",
              message: isPutAway ? "上架成功" : "下架成功"
            });
            this.getTableData();
          });
      });
    },
    addGoods() {
      this.reload();
      this.$router.push({ name: "addGoods" });
    },
    editGoods(goodsCode) {
      this.reload();
      this.$router.push({ path: `edit-goods/${goodsCode}` });
    },
    async editIsPutAway(event, goodsCode) {
      this.$confirm(`是否${event ? "上" : "下"}架当前商品`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let param = {
            isPutAway: event ? 1 : 0,
            goodsCodes: [goodsCode]
          };
          this.$http
            .post("hssgoodsadmin/serviceGoodsInfo/batchPutAwayGoods", param)
            .then(() => {
              this.$message({
                type: "success",
                message: event ? "上架成功" : "下架成功"
              });
            });
        })
        .catch(() => {
          this.getTableData();
        });
    },
    async getTableData(page = 1, size = 20) {
      const { data: res } = await this.$http.get(
        `hssgoodsadmin/serviceGoodsInfo/queryGoodsInfoByPage?page=${page}&size=${size}`
      );
      this.tableData = res.list;
      this.total = res.total;
      this.currentPage = res.pageNum;
      this.size = res.pageSize;
    },
    async search() {
      const {
        data: res
      } = await this.$http.get(
        `hssgoodsadmin/serviceGoodsInfo/queryGoodsInfoByPage`,
        { params: this.from }
      );
      this.tableData = res.list;
      this.total = res.total;
      this.currentPage = res.pageNum;
      this.size = res.pageSize;
    },
    async getServiceClassify() {
      const { data } = await this.$http.get(
        `hssgoodsadmin/serviceClassify/getSubClassifyList`
      );
      this.classifyTree = data;
    },
    async getSubServiceAreaList() {
      const { data } = await this.$http.get(
        `hssgoodsadmin/serviceAreaInfo/getSubServiceAreaList`
      );
      this.subServiceAreaList = data;
    },
    async getCraftList() {
      const { data } = await this.$http.get(
        `hssgoodsadmin/serviceGoodsInfo/getCraftList`
      );
      this.craftList = data;
    },
    isEmpty() {
      this.from.goodsType = "";
      this.from.isPutAway = "";
      this.from.areaCode = "";
      this.from.subClassifyCode = "";
      this.from.craftCode = "";
      this.from.goodsTitle = "";
    }
  },
  created() {
    this.getTableData();
    this.getServiceClassify();
    this.getSubServiceAreaList();
    this.getCraftList();
  }
};
</script>

<style scoped>
.el-select .el-input {
  width: 100px;
}
.herdertop {
  height: 8vh;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}
.topImg {
  margin-right: 20px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.input-with-select {
  right: 20px;
  position: absolute;
}
.pagination_block {
  right: 0px;
  position: absolute;
  margin-top: 15px;
}
</style>
